<template>
  <div class="citymap">
    <MyHead title="湖北高校防艾活动" style="background-color: white"></MyHead>
    <div class="box" :style="{ backgroundImage: `url(${bjImg})` }">
      <div class="title-box">
        <div class="title">{{ cityName }} 区域地图</div>
      </div>
      <div class="map-box" v-if="flag">
        <umap :mapdata="citydata"  type="2" @getcurrentcode="getcurrentcode"></umap>
      </div>
      <div class="school-box" v-if="showBox" >
        <div class="title-box flexb"  >
          <div class="box-left">高校列表</div>
          <van-icon name="cross" color="rgb(180 168 168)" size="20px" @click="showBox=false" />
        </div>
        <div class="title-text flexb">
            <div>学校名称</div>
            <div>参与人数</div>
          </div>
        <div class="list-box"  v-if="this.school_info.length>0">
          <div
            class="item flexb"
            v-for="(item, index) in school_info"
            :key="index"
            @click="goSchool(item)"
          >
            <div class="item-left">
              <div class="item-img" v-if="item.header_image">
                <img :src=sourceURL+item.header_image alt="" srcset="">
              </div>
              <div class="item-img"  v-else>
                <img src="../../assets/images/school-ico2.png" alt="" width="100%" height="100%" />
              </div>
              <div>{{ item.name }}</div>
            </div>
            <div class="item-right">
             {{ item.act_num }}
            </div>
          </div>
        </div>
        <div  class="list-box" v-else>
          <div  class="item">
            <van-empty description="暂无数据" image-size="100" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mapdata from './hubei.json'
import umap from './umap'
export default {
  components:{
    umap,
  },
  data() {
    return {
      cityName:'',
      mapdata,
      citydata:{},
      showBox:true,
      school_info: [
        
      ],
      searchValue: "",
      bjImg: "",
      openid: $.cookie("openid"),
      area_info:[],
      flag:false,
    };
  },
  computed: {},
  methods: {
    async getcurrentcode(depart_code,mdata){
        let res = await this.$ajax.arearank({
            depart_code:depart_code,
            openid:this.openid
        })
        if (res.code ==1) {
            // this.school_info = res.data.act_data.area_info;
            this.school_info = res.data.act_data.school_info;
            this.showBox = true
            // 第一次 排序对比 
            if(mdata){
              var sortdesc = function(a,b){
                return b['percentage'] - a['percentage'];
              };
              var list = res.data.act_data.area_info;
              if(list instanceof Array){
                  mdata.forEach((item)=>{
                  list.forEach((v)=>{
                    if(item.properties.adcode==v.depart_code){
                        item.percentage = parseFloat(v.percentage);
                    }
                  })
                })
                this.flag = true;
                this.citydata = [...mdata].sort(sortdesc);
              }else{
                this.flag = true;
                this.citydata = [...mdata];
              }
              console.log(this.citydata);
            }
        }else{
            this.$toast(res.msg);
        }
    },
    async getCityData(){
      this.flag = false;
       const city = this.mapdata[this.$route.params.cityIndex];
       const adcode = city.properties.adcode;
       this.cityName = city.properties.name;
       console.log(city)
       let res = await this.$ajax.getarealist({
            openid:this.openid,
            depart_code:adcode ,
        })
        if(res.code==1){
          // this.citydata = res.data.features;
          this.getcurrentcode(adcode, res.data.features);
        }
        // this.citydata = res.data.features;
       
      //  if(adcode==429006||adcode==429004||adcode==429005||adcode==429021){
      //   let res = await this.$ajax.getarealist({
      //     openid:this.openid,
      //     depart_code:adcode ,
      //   })
      //   this.citydata = res.data.features;
      //  }else{
      //   let res = await this.$ajax.getarealist({
      //     openid:this.openid,
      //     depart_code:adcode ,
      //   })
      //   this.citydata = res.data.features;
      //  }
       
    },

    onSearch(val) {
      this.$toast(val);
    },
    goCityMap() {},
    goSchool(item) {
      // 学校
      this.getUserType(2);
      this.$router.push({ name: "schoolindex" ,query:{name:item.name,depart_code:item.depart_code}});
    },
  },
  mounted() {
    this.$nextTick(()=>{
      this.getCityData() 
    })
  },
};
</script>

<style lang="scss" scoped>
.citymap {
  width: 100%;
  min-height: 100vh;
  background: #ffe5e5;
  position: absolute;
  .box {
    width: 100%;
    min-height: calc(100vh - 50px);
    background-size: 100% 100%;

    .title-box {
      text-align: center;
      color: #e21b1b;
      font-size: 24px;
      padding-top: 22px;
      font-weight: 600;
      .title {
      }
    }

    .map-box {
      margin-top: 30px;
      padding:0 10px;
      width:100%;
      box-sizing: border-box;
    }
    .school-box {
      margin: 20px 8px 11px 8px;
      background-color: #eeccd263;
      /*高校列表*/ 
      .title-box{
        padding: 10px;
        .box-left {
        display: flex;
        align-items: center;
        color:#A62E41;
        font-size: 16px;
        text-align: left;
        font-family: SourceHanSansSC-bold;
        font-weight: bold;
        margin-left: 13px;
        width: 20%;
        background: #EECCD2;
      }
      }
      /*学校名称*/ 
      .title-text{
        padding: 5px 20px;
        font-size: 14px;
        font-weight: bold;
      }
      .list-box {
        width:100%;
        max-height: 200px;
        overflow-y: scroll;
        .item {
          padding: 5px 50px 5px 13px;
          .item-left {
            display: flex;
            align-items: center;
            .item-img {
              width: 30px;
              height: 30px;
              margin-right: 10px;
              overflow: hidden; /* 隐藏超出容器的部分 */
              img {
                width: 100%;
                height: 100%;
                object-fit: cover; /* 等比例缩放并裁剪，保持图片不变形 */
              }
            }
          }
          .item-right {
            display: flex;
            align-items: center;
            color:#CC1617;
          }
        }
      }
    }
  }
}
</style>